<template>
  <div id="app">
    <!-- router-link的button属性是指定标签被渲染 replace 让浏览器无法返回,-->
    <!-- <router-link to="/home" tag="button" replace>首页</router-link>
    <router-link to="/about" tag="li">关于</router-link> -->
    <!-- 动态路由 -->
    <!-- <router-link :to="'/user/' + userId">用户</router-link> -->
    <!-- 带参数路由 -->
    <!-- <router-link :to="{path: '/profile', query: {name: 'zhangsan', age:'18', city: 'xian'}}">档案</router-link> -->

    <!-- <button id="bt" @click="btnClick">按钮</button>
    <button id="profile-btn" @click="profileClick">profile的按钮</button> -->

    <!-- 这个标签才能渲染home,或者about中的内容 -->
    <!-- <router-view></router-view> -->

    <!-- <tab-bar>
      <item-tab-bar path="/home" activeColor="deepPink">
        <img slot="item-icon" src="@/assets/img/tabbar/home.svg" />
        <img slot="item-icon-active" src="@/assets/img/tabbar/home_active.svg" />
        <div slot="item-text">首页</div>
      </item-tab-bar>
      <item-tab-bar path="/category" activeColor="deepPink">
        <img slot="item-icon" src="@/assets/img/tabbar/category.svg" />
        <img slot="item-icon-active" src="@/assets/img/tabbar/category_active.svg" />
        <div slot="item-text">分类</div>
      </item-tab-bar>
      <item-tab-bar path="/shopcart" activeColor="deepPink">
        <img slot="item-icon" src="@/assets/img/tabbar/shopcart.svg" />
        <img slot="item-icon-active" src="@/assets/img/tabbar/shopcart_active.svg" />
        <div slot="item-text">购物车</div>
      </item-tab-bar>
      <item-tab-bar path="/profile" activeColor="deepPink">
        <img slot="item-icon" src="@/assets/img/tabbar/profile.svg" />
        <img slot="item-icon-active" src="@/assets/img/tabbar/profile_active.svg" />
        <div slot="item-text">我的</div>
      </item-tab-bar>
    </tab-bar>
    <router-view></router-view> -->

    <!-- <TestThree></TestThree> -->

    <div id="echarts-test" style="width: 300px; height: 300px">

    </div>
  </div>
</template>

<script>
// import Home from "@/components/About"
import TabBar from "@/components/tabbar/TabBar";
import ItemTabBar from "@/components/tabbar/ItemTabBar";
import Home from "@/views/home/Home";
import Category from "@/views/category/Category";
import Profile from "@/views/profile/Profile";
import Shopcart from "@/views/shopcart/Shopcart";
import TestThree from "@/views/three/TestThree"

export default {
  name: "App",
  data() {
    return {
      userId: "lisi",
      graphChart: "",
      chartData:{
    "title":{
        "text":"温度曲线图",
        "textStyle":{
            "fontSize":16,
            "color":"#99ccff"
        }
    },
    "toolbox":{
        "show":true,
        "feature":{
            "saveAsImage":{
                "show":true,
                "color":"#99ccff"
            }
        },
        "color":"#99ccff",
        "borderColor":"#99ccff"
    },
    "legend":{
      "orient": 'vertical', 
      "itemWidth": 8,
        "itemHeight": 8, 
        "data":["工作面一","工作面二"],
        "textStyle":{
            "color":"#99ccff"
        }
    },
    "xAxis":{
        "data":[
            "16:38:06",
            "16:38:09",
            "16:38:12",
            "16:38:15",
            "16:38:18",
            "16:38:21"
        ],
        "axisLine":{
            "lineStyle":{
                "color":"#99ccff"
            }
        },
        "axisLabel":{
            "color":"#99ccff"
        },
        "axisTick":{
            "lineStyle":{
                "color":"#99ccff"
            }
        }
    },
    "yAxis":{
        "splitLine":{
            "show":true,
            "lineStyle":{
                "color":"#99ccff"
            }
        },
        "axisLine":{
            "lineStyle":{
                "color":"#99ccff"
            }
        }
    },
    "series":[
        {
            "name":"工作面一",
            "type":"line",
            "smooth":true,
            "data":[
                10,
                30,
                47,
                22,
                33,
                50
            ]
        },
        {
            "name":"工作面二",
            "type":"line",
            "smooth":true,
            "data":[
                45,
                36,
                18,
                36,
                21,
                29
            ]
        }
    ]
}
    };
  },
  methods: {
    // btnClick: function() {
    //   // $router是router组件给所有组件都加的一个属性
    //   this.$router.push("/about");
    // },
    // profileClick: function() {
    //   this.$router.push({
    //     path: "/profile",
    //     query:{
    //       name:"lisi",
    //       age:"87",
    //       holidy:"play basketball"
    //     }
    //   })
    // }
    initEchart: function() {
      this.graphChart = this.$echarts.init(document.getElementById("echarts-test"));
      this.graphChart.setOption(this.chartData);
    }
  },
  components: {
    // TabBar,
    // ItemTabBar,
    // Home,
    // Category,
    // Profile,
    // Shopcart,
    // TestThree
  },
  mounted() {
    this.initEchart();
  }
};
</script>

<style>
</style>
